<template>
  <div>
    <van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-list  :finished="finished">
      <van-cell v-for="item in addreList" :key="item.id">
            <template #title>
                <span v-if="item.is_default" style="display: inline-block;width: 30px;height: 15px;line-height: 15px;
                border: 1px solid #ffb4c7;color: #fa436a;text-align:center;font-size: 12px;margin-right: 5px;">默认</span>
                <span>{{ item.address }}</span>
            </template>
            <template #label>
                <span>{{ item.contactor_name }}</span>
                <span style="margin-left: 10px;">{{ item.phone }}</span>
            </template>
            <template  #right-icon>
                <div class="dolist">
                    <img src="@/assets/write.png" alt="" @click="handleEdit(item)">
                    <img src="@/assets/lajitong.png" alt="" @click="handleReomve(item.id)">
                </div>
            </template>
      </van-cell>
    </van-list>
    <van-button style="width: 92%;margin: auto;position: fixed; bottom: 10px;
    left:50%;transform: translate(-50%,0);" type="primary" block color="#fa436a" 
      @click="handleAdd(null)">新增地址</van-button>
  </div>
</template>
<script>
import { getAddress,delAddress} from "@/api/address";
export default {
  data() {
    return {
      addreList: [],
      finished: false,
    };
  },
  created() {
   this.handleAddress();
  },
  computed: {},
  methods: {
    handleAddress(){
      getAddress().then((res) => {
        this.addreList = res.data.data;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    handleAdd(){
      this.$router.push({path:"/address/addressManage",query:{type:"add"}})
    },
    handleEdit(item){
        this.$router.push({path:"/address/addressManage",query:item})
    },
    handleReomve(id){
      this.$dialog.confirm({
        title:"提示",
        message:"你确定要删除此地址吗?"
      }).then(()=>{
        delAddress({address_id:id});
        this.$router.go(0);
      }).catch(()=>{})
    }
  },
};
</script>
<style scoped>
    .dolist{
        display: flex;
        align-items: center;
    }
    .dolist img{
        width: 25px;
        height: 25px;
        margin: 0 5px;
        cursor: pointer;
    }
</style>
